<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智慧校园安全防范平台</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="assets/bundle.element.css">
    <!--全局css-->
    <link rel="stylesheet" href="style.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .page {
            width: 100%;
            height: 100%;
        }

        .el-carousel__container {
            height: 100%;
        }

        .slider_img {
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-position: 10% 50%;
            background-color: #2568d2;
        }

        .logo {
            left: 15%;
            position: fixed;
            z-index: 999;
            top: -22%;
        }

        .form_div {
            width: 420px;
            position: fixed;
            z-index: 999;
            right: 10%;
            top: 25%;
            border-radius: 5%;
            background: #DFECF9;
        }

        .form {
            width: 280px;
            margin: 10%;
        }

        .form .icon {
            font-size: 24px;
            color: #1F7DD4;
        }

        .form .icon-eye {
            font-size: 24px;
        }

        .telphone {
            position: fixed;
            top: 3%;
            right: 15%;
            font-size: 30px;
            color: aliceblue;
            z-index: 9999;
            letter-spacing: 5px;
        }
    </style>
</head>
<body>

<div class="page" id="page-vue">
    <img src="imgs/logo-dl3.png" class="logo">
    <i class="el-icon-phone-outline telphone">400-6167119</i>
    <el-carousel :interval="3000" arrow="never" :autoplay="true" style="height: 100%">
        <el-carousel-item style="background-image: url('imgs/slogan01.png');" class="slider_img">

        </el-carousel-item>
        <el-carousel-item style="background-image: url('imgs/hand.png');" class="slider_img">

        </el-carousel-item>
    </el-carousel>

    <div class="form_div">
        <el-form class="form">
            <el-form-item>
                <p><img src="imgs/logo-dl.png"></p>
            </el-form-item>

            <el-form-item>
                <el-input placeholder="用户名" v-model="username">
                    <template slot="prepend">
                        <i class="icon iconfont icon-user"></i>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-input placeholder="密码" :type="pwdtype" v-model="password">
                    <template slot="prepend">
                        <i class="icon el-icon-goods"></i>
                    </template>
                    <i class="el-icon-view el-input__icon icon-eye" slot="suffix" @click="onEyepwd"></i>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-checkbox id="psw" type="checkbox" style="color:blue">记录密码</el-checkbox>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" round style="width: 100px;" @click="login">登录</el-button>
            </el-form-item>

        </el-form>
    </div>
</div>


<script type='text/javascript' src='assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='js/component.js' charset='utf-8'></script>

<script>

    var vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            pwdtype: 'password',
            username: '',
            password: ''
        },
        methods: {
            login: function () {
                if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {
                    localStorage.setItem("psw", this.password);
                    localStorage.setItem("name", this.username);
                } else {
                    localStorage.removeItem("psw");
                    localStorage.removeItem("name");
                }
                userLogin(this.username, this.password).success((data) => {
                    //alert( JSON.stringify(data) );
                    if (data.state == 0) {
                        location.href = 'index.html'
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '无权限登录，请管理员登录'
                        });
                    }
                });
            },

            onEyepwd: function () {
                this.pwdtype = this.pwdtype == 'password' ? 'text' : 'password';
            }

        },
        created: function () {
            $('.page').show();
        },
        mounted: function () {
            if (localStorage.getItem("name")) {
                $(".el-checkbox input[type='checkbox']").is(':checked') == true;
                this.username = localStorage.getItem("name");
            }
            if (localStorage.getItem("psw")) {
                $(".el-checkbox input[type='checkbox']").is(':checked') == true;
                this.password = localStorage.getItem("psw");
            }
            let that = this;
            document.onkeypress = function (e) {
                var keycode = document.all ? event.keyCode : e.which;
                if (keycode == 13) {
                    vuePageIndex.login();// 登录方法名
                    return false;
                }
            };
        }
    });

</script>

</body>
</html>
